/* _mixins.scss - 优化后的Mixins工具集 */
@use "sass:map";
@use "./variables" as *;

// 使用 Map 查询，支持动态断点
@mixin respond-to($breakpoint) {
  $value: map.get($breakpoints, $breakpoint);
  @if $value {
    @media (min-width: $value) {
      @content;
    }
  } @else {
    @error "断点 '#{$breakpoint}' 不存在。可用断点: #{map.keys($breakpoints)}";
  }
}

@mixin respond-below($breakpoint) {
  $value: map.get($breakpoints, $breakpoint);
  @if $value {
    @media (max-width: #{$value - 1px}) {
      @content;
    }
  } @else {
    @error "断点 '#{$breakpoint}' 不存在。可用断点: #{map.keys($breakpoints)}";
  }
}

/* ===== 响应式区间混入 ===== */
@mixin respond-between($min, $max) {
  @media (min-width: map.get($breakpoints, $min)) and (max-width: map.get($breakpoints, $max)) {
    @content;
  }
}

/* ===== Flex布局混入 ===== */
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ===== 文本混入 ===== */
@mixin text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== 多行文本省略混入 ===== */
@mixin text-clamp($lines: 2) {
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

/* ===== 卡片混入 ===== */
@mixin card-base {
  background: var(--color-bg-primary);
  border-radius: $border-radius-md;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border-secondary);
  transition: all $transition-base;
  color: var(--color-text-primary);
}

@mixin card-hover {
  &:hover {
    box-shadow: var(--shadow-base);
    transform: translateY(-2px);
    border-color: var(--color-primary);
  }
}

@mixin card-interactive {
  @include card-base;
  @include card-hover;
  cursor: pointer;
}

/* ===== 输入框混入 ===== */
@mixin input-base {
  width: 100%;
  padding: $spacing-sm $spacing-md;
  border: 1px solid var(--color-border-primary);
  border-radius: $border-radius-base;
  font-size: $font-size-base;
  line-height: $line-height-normal;
  color: var(--color-text-primary);
  background: var(--color-bg-secondary);
  transition: all $transition-fast;

  &::placeholder {
    color: var(--color-text-placeholder);
  }

  &:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-lighter);
  }

  &:disabled {
    background: var(--color-bg-disabled);
    color: var(--color-text-disabled);
    cursor: not-allowed;
  }
}

/* ===== 阴影混入 ===== */
@mixin shadow-elevation($level: 1) {
  @if $level == 1 {
    box-shadow: var(--shadow-sm);
  } @else if $level == 2 {
    box-shadow: var(--shadow-base);
  } @else if $level == 3 {
    box-shadow: var(--shadow-md);
  } @else if $level == 4 {
    box-shadow: var(--shadow-lg);
  } @else if $level == 5 {
    box-shadow: var(--shadow-xl);
  }
}

/* ===== 网格布局混入 ===== */
@mixin grid-auto-fill($min-width: 250px, $gap: $spacing-lg) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax($min-width, 1fr));
  gap: $gap;
}

/* ===== 滚动条混入 ===== */
@mixin custom-scrollbar($width: 6px, $track-color: var(--scrollbar-track), $thumb-color: var(--scrollbar-thumb)) {
  &::-webkit-scrollbar {
    width: $width;
    height: $width;
  }

  &::-webkit-scrollbar-track {
    background: $track-color;
    border-radius: $border-radius-base;
  }

  &::-webkit-scrollbar-thumb {
    background: $thumb-color;
    border-radius: $border-radius-base;
    transition: background $transition-fast;

    &:hover {
      background: var(--scrollbar-thumb-hover);
    }
  }
}

@mixin hide-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

/* ===== 主题过渡混入 ===== */
@mixin theme-transition {
  transition-property: background-color, color, border-color, box-shadow;
  transition-duration: $transition-base;
  transition-timing-function: ease-in-out;
}



/* ===== 主题适配 Mixins ===== */

/**
 * 基础卡片样式 - 自动适配主题
 * 用于：用户卡片、设置卡片、内容卡片等
 */
@mixin theme-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-secondary);
  box-shadow: var(--shadow-base);
  border-radius: $border-radius-lg;
  @include theme-transition;
}

/**
 * 可悬停卡片样式 - 带交互效果
 * 用于：题目卡片、题目集卡片、快速开始卡片等
 */
@mixin theme-card-hover {
  @include theme-card;
  cursor: pointer;
  transition: all $transition-base;
  
  &:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    border-color: var(--color-primary);
  }
}

/**
 * 内容区域样式 - 主要内容容器
 * 用于：页面主内容区、表格容器、表单容器等
 */
@mixin theme-content-area {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-secondary);
  border-radius: $border-radius-lg;
  box-shadow: var(--shadow-base);
  padding: $spacing-xl;
  @include theme-transition;
}

/**
 * 工具栏样式 - 搜索栏、筛选栏等
 * 用于：搜索工具栏、筛选工具栏、分页栏等
 */
@mixin theme-toolbar {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-secondary);
  border-radius: $border-radius-md;
  padding: $spacing-lg;
  box-shadow: var(--shadow-sm);
  @include theme-transition;
}

/**
 * 消息气泡样式 - 聊天消息
 * 用于：AI 消息、用户消息等
 */
@mixin theme-message-bubble {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-secondary);
  border-radius: $border-radius-md;
  padding: $spacing-md;
  box-shadow: var(--shadow-xs);
  @include theme-transition;
}

/**
 * 设置项样式 - 设置列表项
 * 用于：个人中心设置项、配置项等
 */
@mixin theme-setting-item {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-tertiary);
  border-radius: $border-radius-base;
  padding: $spacing-md;
  transition: all $transition-fast;
  
  &:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-border-primary);
  }
}
